<template>
<div>
  <Scroll :on-reach-bottom="handleReachBottom" loading-text="正在加载中" height="500">
    <List item-layout="vertical">
      <ListItem v-for="item in data" :key="item.id">
        <ListItemMeta :avatar="item.headImage" :title="item.userName" :description="item.addTime"/>
        <i @click="detail(item.id)" v-html="ToText(item.context).substr(0,80)"></i>
        <template slot="action">
          <li>
            <i v-if="item.collection==false" class="el-icon-star-off" size="mini" @click="collection(item)"></i>
            <i v-if="item.collection==true" class="el-icon-star-on" size="mini" @click="collection(item)"></i>
            {{item.collectionNum}}
          </li>
          <li>
            <Icon type="md-heart-outline" v-if="item.love==false" @click="love(item)"/>
            <Icon type="md-heart" v-if="item.love==true" @click="love(item)"/>
            {{item.loveNum}}
          </li>
          <li>
            <Icon type="ios-chatbubbles-outline" /> {{item.commentNum}}
          </li>
        </template>
        <template slot="extra" v-if="item.topImage != null">
          <img :src="item.topImage" style="width: 280px;height: 140px">
        </template>
      </ListItem>
    </List>
    <div style="text-align: right; position: fixed; right: 0; bottom: 0">
      <el-button icon="el-icon-caret-top" @click="backTop" size="medium" circle></el-button>
    </div>
  </Scroll>
  <DetailLifeShare ref="detailLifeShare"></DetailLifeShare>
</div>
</template>

<script>
import PersonLifeShare from "@/components/lifesquare/personLifeShare";
import DetailLifeShare from "@/components/lifesquare/detailLifeShare";
import {addCollectionLove, getCollectionLove} from "@/api/liveShare";
import {getAllCollectionSharing} from "@/api/collection";

export default {
  name: "myShare",
  components: {PersonLifeShare, DetailLifeShare},
  data () {
    return {
      find: false,
      input: '',
      data: [],
      data2: [],
      page: 0,
      size: 5
    }
  },
  created() {
    this.getAllLivingShare(0,5)
  },
  methods: {
    async getAllLivingShare(page, size) {
      await getAllCollectionSharing(page, size).then(res => {
        this.data2 = res.body.data
      })
      if (size == 1) {
        this.data.unshift(this.data2[0])
      } else {
        for (let i = 0; i < this.data2.length; i++) {
          this.data.push(this.data2[i])
        }
      }

    },
    handleReachBottom() {
      return new Promise(resolve => {
        setTimeout(() => {
          this.page = this.page + 1
          this.getAllLivingShare(this.page, this.size)
        }, 20);
      });
    },
    backTop() {
      this.data = []
    },
    async collection(item) {
      await addCollectionLove(item.id, 2).then(res => {
        if (res.body.data) {
          item.collection = !item.collection
        }
      })
      this.data = []
      this.getAllLivingShare(0,3)
    },
    ToText(HTML) {
      var input = HTML;
      input = input.replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi, '').replace(/<[^>]+?>/g, '').replace(/\s+/g, ' ').replace(/ /g, ' ').replace(/>/g, ' ').replaceAll("<img[^>]*/>", " ");
      return input
    },
    async love(item) {
      await addCollectionLove(item.id, 1).then(res => {
        item.love = !item.love
      })
      getCollectionLove(item.id, 1).then(res => {
        item.loveNum = res.body.data
      })
    },
    detail(id) {
      this.$refs.detailLifeShare.add(id)
    },
    personLife() {
      this.$refs.personLifeShare.add()
    },
    handleOk() {
      this.page = 0
      this.getAllLivingShare(0, 1)
    }
  }
}
</script>

<style scoped>

</style>
